<template>
  <div class="container">
    <el-dialog
      title="商品绑定"
      :visible.sync="bindingDialog.centerDialogVisible"
      @open="getData"
      @close="close"
      center
    >
      <el-button
        class="add"
        size="small"
        type="primary"
        @click="addCommodity"
        icon="el-icon-circle-plus"
      >添加商品</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="Name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="ClassName" label="商品种类" align="center"></el-table-column>
        <el-table-column prop="BarCode" label="条形码" align="center"></el-table-column>
        <el-table-column prop="SupplierName" label="供应商名称" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="handleDelete(scope)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        width="800px"
        @open="getDatas"
        title="商品列表"
        :visible.sync="dialog.centerDialogVisible"
        append-to-body
      >
        <div class="top">
          <el-input
            style="width:200px;margin-bottom:5px"
            v-model="search.searchCode"
            placeholder="请输入商品名称或编码"
            clearable
          ></el-input>
          <el-button
            size="small"
            type="primary"
            class="handleSearch"
            icon="el-icon-search"
            @click="handleSearch()"
          >查询</el-button>
        </div>
        <el-table
          max-height="600"
          :data="tableDatas"
          border
          style="width: 100%"
          @selection-change="handleSelectionChanges"
          empty-text="暂无数据"
        >
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column prop="Name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="Code" label="商品Code" align="center"></el-table-column>
        <el-table-column prop="BarCode" label="条形码" align="center"></el-table-column>
          <el-table-column prop="ClassName" label="分类" align="center"></el-table-column>
          <el-table-column prop="CreateTime" label="添加时间" align="center"></el-table-column>
          <el-table-column prop="SupplierName" label="供应商名称" align="center"></el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
        <!-- 分页 -->
        <pagination
          @page="handleSizeChanges"
          @pagesize="handleCurrentChanges"
          :pageData="pageDatas"
        ></pagination>
      </el-dialog>
      <!-- 分页 -->
      <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>
    </el-dialog>
  </div>
</template>
<script>
import {
  getBindGoods,
  bindGood,
  delBindGoods,
} from "@/api/supplier/supplierList";
import Pagination from "@/components/pagination";
import { selectErpGoodsData } from "@/api/commodity/commodityList";
export default {
  props: {
    bindingDialog: Object,
  },
  components: {
    pagination: Pagination,
  },
  data() {
    return {
      tableData: [],
      tableDatas: [],
      search: {
        searchCode: "",
      },
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      //分页
      pageDatas: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      multipleSelection: [],
      // multipleSelections: [],
      multipleSelectionsCode: [],
      dialog: {
        centerDialogVisible: false,
      },
    };
  },
  created() {},
  methods: {
    //弹出确定
    confirm() {
      if (this.multipleSelectionsCode.length > 0) {
        let data = {
          // product_ids: this.multipleSelections.join(","),

          goods: JSON.stringify(this.multipleSelectionsCode),
          supplier_id: this.bindingDialog.id,
          supplier_code: this.bindingDialog.code,
        };
        console.log(data);
        bindGood(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg || res.message,
            });
            this.pageData.page = 1;
            this.getData();
            this.cancel();
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请选择商品",
        });
      }
    },
    //关闭
    close() {
      this.bindingDialog.centerDialogVisible = false;
      this.tableData = [];
    },
    //关闭弹出层
    cancel() {
      this.dialog.centerDialogVisible = false;
    },
    // 获取数据
    getData() {
      let data = {
        supplier_code: this.bindingDialog.code,
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        goods_codes: "",
      };
      getBindGoods(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.paginate.data;
          this.pageData.page = res.data.paginate.current_page;
          this.pageData.pagesize = res.data.paginate.last_page;
          this.pageData.total = res.data.paginate.total;
        }
      });
    },
    getDatas() {
      let data = {
        limit: this.pageDatas.pageSize,
        page: this.pageDatas.page,
        goods_code: this.search.searchCode,
      };
      selectErpGoodsData(data)
        .then((res) => {
          if (res.code == 0) {
            this.tableDatas = res.data.paginate.data;
            this.pageDatas.page = res.data.paginate.current_page;
            this.pageDatas.pagesize = res.data.paginate.per_page;
            this.pageDatas.total = res.data.paginate.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加商品
    addCommodity() {
      this.dialog.centerDialogVisible = true;
    },
    //删除
    handleDelete(scope) {
      let data = {
        supplier_code: this.bindingDialog.code,
        // product_ids:scope.row.ProductId,
        goods_codes: scope.row.Code,
      };
      this.$confirm("是否删除该条信息?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBindGoods(data).then((res) => {
            if (res.code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg || res.message,
              });
            }
          });
        })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审",
          });
        });
    },
    // 搜索
    handleSearch() {
      this.pageData.page = 1;
      this.getDatas();
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = [];
      let valMain = val;
      valMain.forEach((res) => {
        this.multipleSelection.push(res.id);
      });
    },
    //弹出每页多少条
    handleCurrentChanges(val) {
      this.pageDatas.page = 1;
      this.pageDatas.pageSize = val;
      this.getDatas();
    },
    //弹出选取页数
    handleSizeChanges(page) {
      this.pageDatas.page = page;
      this.getDatas();
    },
    //弹出多选
    handleSelectionChanges(val) {
      // this.multipleSelections = [];
      this.multipleSelectionsCode = [];
      let valMain = val;
      console.log(valMain, 11111);
      valMain.forEach((res) => {
        // this.multipleSelections.push(res.ProductId);
        this.multipleSelectionsCode.push({
          erp_goods_id: res.ProductId,
          erp_goods_code: res.Code,
        });
      });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
.title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>